<template>
	<view class="content">
		<view class="goods-evaluate-box" v-for="(item,index) in fromInfo.product" :key="item.product_id">
			<view class="goods-info-box">
				<view class="goods-img-box"><image :src="item.src" mode=""></image></view>
				<view class="goods-title-box">{{item.store_name}}</view>
			</view>
			<view class="content-box">
				<textarea placeholder="期待你的评价..." v-model="item.content" placeholder-style="color:#CCC"></textarea>
			</view>
			<view class="upload-img-box">
				<view class="title-box">上传照片</view>
				<view class="input-box">
					<view class="upload-img-box flex-c-w">
						<view class="upload-img-box-item" v-for="(newItem,newIndex) in item.imgUrls" @click="bindImgPreview(newItem.path,item.imgUrls)" :key="newIndex">
						    <image :src="newItem.path" mode="aspectFill"></image>
							<view class="del" @click.stop="bindDel(newIndex)">
								<image src="/pageMember/static/icon12.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="upload-img-item" @click="bindAddImg(item.imgUrls)">
						    <image src="../static/icon11.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="pf-box">
				<text>商品评分：</text>
				<u-rate :count="count" size="30" active-color="#FCC526" v-model="item.star"></u-rate>
			</view>
		</view>
		
		<view class="wl-box bg-white">
			<text>物流评分：</text>
			<u-rate :count="count" size="30" active-color="#FCC526" v-model="fromInfo.logistics_star"></u-rate>
		</view>
		<view class="bottom-plate-box">
			<!-- 底部but -->
			<view class="bottom-but-box" @click="bindSubmit">提交评价</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data(){
			return {
				fromInfo:{//表单信息
					order_id:0,
					logistics_star:0,
					product:[]
				},
				count: 5,
			}
		},
		onLoad(options) {
			uni.showLoading({title:'加载中'});
			console.log(options.orderId);
			this.fromInfo.order_id = options.orderId;
			this.getEvaluatePageData();
		},
		methods:{
			getEvaluatePageData(){ //评价数据
				let { order_id } = this.fromInfo;
				this.$u.api.evaluatePageApi({order_id:order_id}).then(res=>{
					if(res.code==1){
						console.log('评价数据：',res.data);
						res.data.forEach(res=>{
							res.imgUrls = [];
							res.star = 0;
							res.src = res.image;
							delete res.image;
						});
						this.fromInfo.product = res.data;
					}
				});
			},
			bindAddImg(imgArr){//图片上传
				this.$uploadPic(9, res => {
					imgArr.push(...res);
				});
			},
			bindImgPreview(current,list){ //图片预览
				const urls = list.map(item => item.path)
				uni.previewImage({
					urls,
					current
				})
			},
			bindDel(index){ //删除图片
				let { product } = this.fromInfo;
				product.map(item=>item.imgUrls.splice(index,1));
				this.$refs.uToast.show({title: '删除成功',position:'center'});
			},
			bindSubmit(){ //提交评价
				let { logistics_star, product } = this.fromInfo;
				let isOk = product.every(item=>item.star!=0);
				if(!isOk){
					this.$showToast('请对描述相符进行评分');
					return;
				}else if(logistics_star==0){
					this.$showToast('请对物流服务进行评分');
					return;
				}
				product.forEach(item=>{
					let arrId = [];
					item.image = '';
					delete item.mer_id;
					delete item.src;
					delete item.store_name;
					item.imgUrls.forEach(items=>{
						arrId.push(items.id);
						item.image = arrId.toString();
					});
				});
				console.log(this.fromInfo,'------');
				this.$u.api.evaluateOrderApi(this.fromInfo).then(res=>{
					if(res.code==1){
						uni.showLoading({
							title:'提交中...',
							mask:true
						})
						setTimeout(()=>{
							uni.redirectTo({
								url: `/pageMember/orderDetails/submit?status=${1}`
							});
						},1500)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: calc(100vh - 180rpx);
		overflow: hidden;
		overflow-y: auto;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		background: #F5F5F5;
		.goods-evaluate-box{
			padding: 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			.goods-info-box{
				display: flex;
				margin-bottom: 40rpx;
				.goods-img-box{
					flex: 0.2;
					line-height: 0;
					image{width: 120rpx; height: 120rpx;border-radius: 10rpx;}
				}
				.goods-title-box{
					flex: 0.8;
					align-self: center;
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
				}
			}
			.content-box{
				width: 100%;
				margin-bottom: 30rpx;
				textarea{width: 94%;height: 200rpx;padding: 20rpx;background: #F5F6FA;}
			}
			.upload-img-box{
				.title-box{
					padding-bottom: 30rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}
				.input-box{
					position: relative;
					width: 100%;
					input{
						font-size: 30rpx;
						font-weight: 400;
						padding: 30rpx;
						border: 1rpx solid #000;
						border-radius: 20rpx;
					}
					.upload-img-box{
						width: 100%;
						.upload-img-box-item{
							position: relative;
							line-height: 0;
							image{width: 210rpx;height: 210rpx;margin: 0 20rpx 20rpx 0;}
							.del{
								position: absolute;
								top: 0;
								right: 20rpx;
								image{width: 35rpx; height: 35rpx;margin: auto;}
							}
						}
						.upload-img-item{
							width: 210rpx;
							height: 210rpx;
							background: #F5F6FA;
							margin-bottom: 20rpx;
							display: flex; justify-content: center; align-items: center;
							image{width: 60rpx;height: 60rpx;}
						}
					}
				}
			}
			.pf-box{
				padding: 20rpx 0;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
		}
		.wl-box{
			width: 100%;
			// position: fixed;bottom: 180rpx;left: 0;
			// z-index: 100;
			padding: 40rpx 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
		.bottom-plate-box{
			position: fixed;bottom: 0;left: 0;
			z-index: 100;
			width: 100%;
			padding: 0 20rpx;
			padding-bottom: 80rpx;
			background: #fff;
		.bottom-but-box{
			width: 100%;
			padding: 25rpx 0;
			background: #000;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			border-radius: 50rpx;
			}
		}
	}
</style>